<template>
  <!-------- <催办记录工单详情> ======-->
  <div>
    <a-modal :width="900" class="orderModal" :visible="true" :footer="null" @cancel="handleCancel">
      <div class="infoModal">工单列表详情</div>
      <a-form layout="inline" class="formModel" style="padding:20px 20px 0 20px">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="类型">
              <div class="model_inputStyle" v-if="form.type == 1">快开</div>
              <div class="model_inputStyle" v-if="form.type == 2">查勘</div>
              <div class="model_inputStyle" v-if="form.type == 3">快建</div>
              <div class="model_inputStyle" v-if="form.type == 4">合同签订</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="区县">
              <div class="model_inputStyle">{{ form.country }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="CRM号">
              <div class="model_inputStyle">{{ form.crmNo }}</div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="客户经理">
              <div class="model_inputStyle">{{ form.manager }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="派单时间">
              <div class="model_inputStyle">{{ form.time }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="查勘派单时间">
              <div class="model_inputStyle">{{ form.ckStartTime }}</div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="工单历时">
              <div class="model_inputStyle">{{ form.longTime }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="整体历时">
              <div class="model_inputStyle">{{ form.allLongTime }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="是否超时">
              <div class="model_inputStyle">{{ form.overTimeIs }}</div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="工单环节">
              <div class="model_inputStyle">{{ form.link }}</div>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="是否办结">
              <div class="model_inputStyle">{{ form.endIs }}</div>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="最新进度操作类型">
              <div class="model_inputStyle">{{ form.operationType }}</div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :md="12" :sm="24">
            <a-form-item label="最新进度操作时间">
              <div class="model_inputStyle">{{ urgeTime }}</div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-row>
        <a-col :span="24" style="text-align:center;color:black;font-size:20px;font-weight:bold">
          工单进度说明
        </a-col>
      </a-row>
      <a-row>
        <a-table
          style="margin:20px"
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="urgelist"
          :loading="tableLoading"
          :pagination="false"
        >
          <template slot="urge" slot-scope="text, record">
            <div>
              {{ record.crmStatus }}-{{ record.createDate }}-{{ record.roleName }}-{{ record.memberName
              }}<a-button class="urgeButton" @click="replyEvent(record.id)">回复</a-button>
            </div>
          </template>

          <template slot="replay" slot-scope="text, record">
            <div :key="index" v-for="(item, index) in replylist">
              <div v-if="item.parentId == record.id">
                {{ item.crmStatus }}-{{ item.createDate }}-{{ item.roleName }}-{{ item.memberName }}
              </div>
            </div>
          </template>
        </a-table>
      </a-row>

      <a-row style="text-align:center;margin-top:5px">
        <a-button v-if="progressBtnShow" type="primary" @click="add">添加发起催办</a-button>
        <div style="height:20px"></div>
      </a-row>
    </a-modal>

    <!-- //进度弹窗 -->
    <a-modal :width="900" :visible="progressShow" class="orderModal" :footer="null" @cancel="progressCancel">
      <div class="infoModal">工单进度</div>
      <a-form-model
        ref="ruleForm"
        :model="urgeform"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="formModel"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="crmNo" label="CRM号">
              <div class="model_inputStyle">{{ urgeform.crmNo }}</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="country" label="区县">
              <div class="model_inputStyle">{{ urgeform.country }}</div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="操作时间">
              <div class="model_inputStyle">{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单环节">
              <div class="model_inputStyle">{{ urgeform.link }}</div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="crmStatus" label="说明内容" prop="crmStatus">
              <a-input
                v-model="urgeform.crmStatus"
                @blur="
                  () => {
                    $refs.crmStatus.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="操作类型" prop="statusType">
              <a-select v-model="urgeform.statusType" placeholder="请选择">
                <a-select-option value="1">催办</a-select-option>
                <a-select-option value="2">回复</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 11 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { ACCESS_TOKEN, ROLE_NAME, URGEDETAILS, USERINFO } from '@/store/mutation-types'
import Vue from 'vue'
import { modifyCrmStatus, getUrgeById } from '@/api/public'
import moment from 'moment'
export default {
  props: ['infoListData'],
  components: {},
  inject: ['reload'],
  data() {
    return {
      tableLoading: false,
      parentId: 0, //回复id
      progressShow: false,
      progressBtnShow: false,
      userInfo: {},
      list: [],
      urgelist: [],
      urgeTime: '',
      replylist: [],
      columns,
      key: 1,
      urgeform: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      other: '',
      dateFormat: 'YYYY-MM-DD hh:mm:ss',
      form: {},
      rules: {
        crmNo: [{ required: true, message: '请填写CRM号', trigger: 'blur' }],
        time: [{ required: true, message: '请选择操作时间', trigger: 'change' }],
        statusType: [{ required: true, message: '请选择操类型', trigger: 'change' }],
        country: [{ required: true, message: '请填写区县', trigger: 'blur' }],
        link: [{ required: true, message: '请填写工单环节', trigger: 'blur' }],
        crmStatus: [{ required: true, message: '请填写说明内容', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUrgeByIdFunction()
  },
  mounted() {
    Vue.ls.get(ROLE_NAME) == '客户经理' ? (this.progressBtnShow = false) : (this.progressBtnShow = true)
    Vue.ls.get(ROLE_NAME) == '区县建设' ? (this.progressBtnShow = false) : (this.progressBtnShow = true)
  },
  methods: {
    moment,
    //详情获取
    getUrgeByIdFunction() {
      this.urgelist = []
      this.replylist = []
      this.tableLoading = true
      getUrgeById(this.infoListData.id).then(response => {
        this.form = response.data
        this.form.list.forEach((item, index, arr) => {
          this.urgeTime = arr[0].createDate
          item.statusType == 1 ? this.urgelist.push(item) : this.replylist.push(item)
     
        })
         this.tableLoading = false
      })
    },
    onChangePicker(date, dateString) {
      console.log(date, dateString)
    },
    progressCancel() {
      this.progressShow = false
    },
    handleCancel() {
      this.$emit('cancelEvent')
    },
    add() {
      Object.keys(this.urgeform).forEach(key => (this.urgeform[key] = ''))
      this.urgeform.roleName = Vue.ls.get(ROLE_NAME)
      this.urgeform.urgingId = this.infoListData.id
      this.urgeform.memberId = Vue.ls.get(USERINFO).id
      this.urgeform.country = this.form.country
      this.urgeform.crmNo = this.form.crmNo
      this.progressShow = true
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    //回复
    replyEvent(id) {
      Object.keys(this.urgeform).forEach(key => (this.urgeform[key] = ''))
      this.urgeform.roleName = Vue.ls.get(ROLE_NAME)
      this.urgeform.urgingId = this.infoListData.id
      this.urgeform.memberId = Vue.ls.get(USERINFO).id
      this.urgeform.country = this.form.country
      this.urgeform.crmNo = this.form.crmNo
      this.parentId = id
      this.urgeform.parentId = id
      this.progressShow = true
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let urgeform = JSON.parse(JSON.stringify(this.urgeform))
          if (urgeform.statusType == 2 && this.parentId == 0) {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请选择一条催办信息进行回复',
              duration: 3
            })
            return
          }
          modifyCrmStatus(urgeform).then(response => {
            if (response != undefined) {
              if ((response.code = 200)) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '操作成功!',
                  duration: 3
                })
                this.getUrgeByIdFunction()
              }
            }
            this.progressShow = false
          })
        } else {
          return false
        }
      })
    }
  }
}
const columns = [
  {
    title: '催办',
    dataIndex: 'urge',
    align: 'center',
    width: '50%',
    scopedSlots: { customRender: 'urge' }
  },
  {
    title: '回复',
    dataIndex: 'replay',
    align: 'center',
    width: '50%',
    scopedSlots: { customRender: 'replay' }
  }
]
</script>
<style lang="less">
.gongzuojindu {
  border: 1px solid #d9d9d9;
  width: 420px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: black;
  border-radius: 3px;
  margin-top: 5px;
}
.model_inputStyle {
  width: 100%;
  height: 32px;
  padding-left: 5px;
  color: black;
}
.infoModal {
  height: 51px;
  background: #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.urgeButton {
  margin-left: 15px;
}
</style>
